<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <!--移动端浏览 viewport移动端浏览   width表示可视区域 initial-scale首次浏览 无缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <Title>博客发布</Title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/plugin/editmd/css/editormd.min.css" th:href="@{/plugin/editmd/css/editormd.min.css}">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">

</head>

<body>
<!-- 导航 -->
<nav th:replace="admin/Afragments::menu(1)"></nav>

    <div class="ui attached secondary pointing teal menu basic me-border-hidden">
    <div class="ui container">
        <div class="right menu basic">
            <a href="#" th:href="@{/admin/blogs}" class=" item">列表</a>
            <a href="#" th:href="@{/admin/blogs/input}" class="active item">发布</a>
        </div>
    </div>
</div>

    <!-- 中间内容 -->
    <div class="me-padded-tb-large">
        <!--   SemanticUI 的container属性可以自动响应布局 -->
        <div class="ui container">
            <form id="blog-form"  action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
                <input type="hidden" name="published" th:value="*{published}">
                <input type="hidden" name="id" th:value="*{id}">
                <!-- 标题框 -->
                <div class="required field">
                    <div class="ui left labeled input">

                        <div class="ui selection compact teal basic dropdown label">
                            <input type="hidden" value="原创" name="flag" th:value="*{flag}">
                            <i class="dropdown icon"></i>
                            <div class="text">原创</div>
                            <div class="menu">
                                <div class="item" data-value="原创">原创</div>
                                <div class="item" data-value="转载">转载</div>
                                <div class="item" data-value="翻译">翻译</div>
                            </div>
                        </div>
                        <input type="text" name="title" placeholder="标题" th:value="*{title}" >
                    </div> 
                </div>

                <!-- 博客内容框 -->
                <div class="required field">
                    <!-- 到时候替换成markdown   z-index表示设置的优先级1为最高 -->
                    <div id="my-editormd" style="z-index: 1 !important;">
                        <textarea placeholder="请输入博客内容..." name="content" th:text="*{content}" style="display:none;" >
                        
                        </textarea>
                    </div>
                </div>

                <!-- 图片地址框 -->
                <div class="required field">
                    <div class="ui left labeled input">
                      <label class="ui teal basic label">首图</label>
                      <input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址">
                    </div>
          
                  </div>

                <!-- 文章描述框 -->
                <div class="required field">
                    <textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea>
                </div>

                <!-- 分类和标签 -->
                <div class="two fields">
                    <div class="required field">
                        <div class="ui left labeled input">
                            <label class="ui compact teal basic label">分类</label>
                            <div class="ui selection fluid dropdown ">
                                <input type="hidden" name="typeName" th:value="*{typeName}">
                                <i class="dropdown icon"></i>
                                <div class="text">分类</div>
                                <div class="menu">
                                    <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">算法</div>
                                </div>
                            </div>
                        </div> 
                    </div>
                    <div class="required field">
                        <div class="ui left labeled input">
                            <label class="ui compact teal basic label">标签</label>
                            <div class="ui selection multiple search fluid dropdown ">
                                <input type="hidden" name="tagIds"  th:value="*{tagIds}">
                                <i class="dropdown icon"></i>
                                <div class="text">标签</div>
                                <div class="menu">
                                    <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">算法</div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>

                <!-- 推荐 赞赏 评论开启框 -->
                <div class="inline fields" >
                    <div class="field">
                      <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend" th:checked="*{recommend}" checked class="hidden">
                        <label for="recommend" style="color: white;">推荐</label>
                      </div>
                    </div>
                    <div class="field">
                      <div class="ui checkbox">
                        <input type="checkbox" id="shareStatement" name="shareStatement"  th:checked="*{shareStatement}" checked class="hidden">
                        <label for="shareStatement" style="color: white;">转载声明</label>
                      </div>
                    </div>
                    <div class="field">
                      <div class="ui checkbox">
                        <input type="checkbox" id="appreciation" name="appreciation" th:checked="*{appreciation}" checked class="hidden">
                        <label for="appreciation" style="color: white;">赞赏</label>
                      </div>
                    </div>
                    <div class="field">
                      <div class="ui checkbox">
                        <input type="checkbox" id="commentabled" name="commentabled"  th:checked="*{commentabled}" checked class="hidden">
                        <label for="commentabled" style="color: white;">评论</label>
                      </div>
                    </div>
                  </div>

                <!-- 错误显示框 -->
                <div class="ui error message"></div>

                <!-- 提交框 -->
                <div class="ui right aligned container">
                    <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
                    <button type="button" id="save-btn" class="ui secondary button">保存</button>
                    <button type="button" id="publish-btn" class="ui teal button">发布</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 底部栏 -->
    <footer class="ui inverted vertical segment me-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../../static/image/wechat.png" alt="" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">算法竞赛进阶指南 </a>
                        <a href="#" class="item">分布式协调系统 zookeeper</a>
                        <a href="#" class="item">消息队列 kafka</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">联系方式</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email:yrq991121@163.com</a>
                        <a href="#" class="item">QQ:1193700079</a>
                        <a href="#" class="item">Github</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">网站简介</h4>
                    <p>我的个人技术博客，练习一下Springboot，对于后端技术主要是操作系统和数据库这一块的理论知识，做网页纯属技术爱好，前端技术主要是UI设计，用户交互，要具备优秀的艺术欣赏水平，偶尔接私活，需要的微信扫码加我联系
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider">
            </div>
            <p class="m-text-lined m-text-spaced m-text-thin m-opacity-mini">Copyright @ 2020 - 2021 Blog_Daniel
                Designed by yrq
                <br>
                来自华北理工大学的技术宅
            </p>
        </div>


    </footer>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script type="text/javascript" src="../../static/plugin/editmd/editormd.min.js"  th:src="@{/plugin/editmd/editormd.min.js}"></script>

    <script>
        //初始化markdown编辑器
       var myEditor;

        $(function() {
            myEditor = editormd("my-editormd", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                path    : "/plugin/editmd/lib/"
            });
        });

        //手机端菜单栏显示
        $('.menu.toggle').click(function () {
            $('.me-item').toggleClass('me-mobile-hide');
        });

        //头像下拉框
        $('.ui.user.dropdown').dropdown({
            on: 'hover'
        });

        $('.ui.dropdown').dropdown({
            on: 'hover'
        });

        //保存按钮
       $('#save-btn').click(function () {
           $('[name="published"]').val(false);
           $('#blog-form').submit();
       });

        //发布按钮
       $('#publish-btn').click(function () {
           $('[name="published"]').val(true);
           $('#blog-form').submit();
       });

       //js验证表单
       $('.ui.form').form({
           fields : {
               title : {
                   identifier: 'title',
                   rules: [{
                       type : 'empty',
                       prompt: '标题：请输入博客标题'
                   }]
               },
               content : {
                   identifier: 'content',
                   rules: [{
                       type : 'empty',
                       prompt: '标题：请输入博客内容'
                   }]
               },
               typeName : {
                   identifier: 'typeName',
                   rules: [{
                       type : 'empty',
                       prompt: '标题：请输入博客分类'
                   }]
               },
               tagIds : {
                   identifier: 'tagIds',
                   rules: [{
                       type : 'empty',
                       prompt: '标题：请输入博客标签'
                   }]
               },
               firstPicture : {
                   identifier: 'firstPicture',
                   rules: [{
                       type : 'empty',
                       prompt: '标题：请输入博客首图'
                   }]
               },
               description : {
                   identifier: 'description',
                   rules: [{
                       type : 'empty',
                       prompt: '标题：请输入博客描述'
                   }]
               }
           }
       });
    </script>
</body>

</html>